import { Table, Button, Space } from 'antd';
import React, { useEffect } from 'react';
import { NavLink } from 'react-router-dom';
import {
  getProjectListAsync,
  select_project_list,
} from '../../../redux/slice/project';
import { useDispatch, useSelector } from 'react-redux';

const ProjectTable = () => {
  //redux
  const dispatch = useDispatch();
  const list = useSelector(select_project_list);
  console.log(list);
  useEffect(() => {
    dispatch(getProjectListAsync());
  }, []);
  return (
    <>
      <Table
        bordered
        rowKey='created'
        className='project_table_css'
        dataSource={list} //数据源
        pagination={() => {
          console.log('123');
        }}
        columns={[
          {
            title: (
              <div
                className='iconfont icon-shoucang'
                style={{ color: '#dfd50c' }}
              ></div>
            ),
            dataIndex: 'collect',
            key: 'collect',
            render: (text) => {
              return (
                <div className='iconfont icon-shoucang shoucang-item'></div>
              );
            },
            width: '10%',
          },
          {
            title: '项目名称',
            dataIndex: 'name',
            key: 'name',
            render: (text, data) => {
              // console.log(text, data)
              return (
                <NavLink to={`/project/${data._id}/kanban`}>{text}</NavLink>
              );
            },
            sorter: (a, b) => a.title - b.title,
            width: '30%',
          },
          {
            title: '部门',
            dataIndex: 'organization',
            key: 'organization',
            width: '15%',
          },
          {
            title: '负责人',
            dataIndex: 'owner',
            key: 'owner',
            render: (text) => <div>{text}</div>,
            width: '15%',
          },
          {
            title: '创建时间',
            key: 'created',
            dataIndex: 'created',
            render: (_, record) => (
              <Space size='middle'>
                <div>{record.created}</div>
              </Space>
            ),
          },
          {
            title: '操作',
            key: 'created',
            dataIndex: 'created',
            render: (_, record) => (
              <>
                <Button
                  type='primary'
                  onClick={() => {
                    // edit_click(record._id);
                  }}
                >
                  编辑
                </Button>
                <Button
                  type='danger'
                  onClick={() => {
                    // del_click(record._id);
                  }}
                >
                  删除
                </Button>
              </>
            ),
          },
        ]}
      />
    </>
  );
};

export default ProjectTable;
